<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>我的积分</title>
    <style>
        h3 {
            text-align: center;
            color: #999;
        }

        .item,
        .header {
            display: flex;
            justify-content: space-between;
        }

        .header {
            margin-bottom: 20px;
            color: #666;
            font-size: 16px;
        }

        .header span {
            width: 0;
            flex-shrink: 0;
            flex-grow: 1;
            text-align: center;
        }

        .item {
            color: #999;
            font-size: 12px;
        }

        .item span {
            width: 0;
            flex-shrink: 0;
            flex-grow: 1;
            text-align: center;
        }

        .time {}

        .type {}

        .amount {}
    </style>
</head>

<body>
    <h3>可用积分<span id="points">355</span></h3>
    <div class="records">
        <div class="header">
            <span class="time">时间</span>
            <span class="type">类型</span>
            <span class="amount">数量</span>
        </div>
        <div id="content"></div>
    </div>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="./lib/base.js"></script>
    <script>
        (async () => {
            let hotelId = location.search.split('?')[1].split('&').map(n => ({
                [n.split('=')[0]]: n.split('=')[1]
            }))[0].hotelId
            localStorage.setItem('hotelId', hotelId)
            let content = document.getElementById('content')
            let openid = getOpenid()
            let records = await api.getIntegralList(openid)
            records.forEach(record => {
                content.innerHTML += `
                    <div class="item">
                        <span class="time">${record.createTime}</span>
                        <span class="type">${record.remark}${record.changeType=='0'?'充值':'消费'}</span>
                        <span class="amount">${record.changeType=='0'?'+':'-'}${record.changeScore}</span>
                    </div>
                `
            })
        })()
    </script>
</body>

</html>